<template>
    <div class="ticket-step">
        <ul>
            <li v-for="(i,index) in items" :class="select==(index+1)?'select':''">{{index+1}}.{{i}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    props:{
        select:0,
        items:null
    }
}
</script>
<style lang="less">
    .ticket-step{
        ul{
            height: 50px;
            display: flex;
            flex-wrap:nowrap;
            li{
                display: inline-block;
                height: 50px;
                color: #fff;
                font-size: 18px;
                line-height: 50px;
                background: #454545;
                text-align: center;
                position: relative;
                font-style: oblique;
                width: -webkit-fill-available;
            }
            .select{
                background: #d8000b;
            }
            .select:before{
                content: '';
                position: absolute;
                height: 50px;
                width: 50px;
                background: #d8000b;
                left: 0;
                border-left: 25px solid #454545;
                border-top: 25px solid #d8000b;
                border-bottom: 25px solid #d8000b;
            }
            .select:after{
                content: '';
                position: absolute;
                height: 50px;
                width: 50px;
                background: #d8000b;
                right: -50px;
                border-left: 25px solid #d8000b;
                border-top: 25px solid #454545;
                border-bottom: 25px solid #454545;
                border-right: 25px solid #454545;
                z-index: 2;
            }
        }
    }
</style>